博客站

一、技术栈介绍

UniApp+Vue3+TypeScript组合已成为当前跨平台开发的热门选择，它结合了：

1. UniApp：DCloud推出的跨平台框架，一次开发可发布到iOS、Android、Web及各种小程序平台
2. Vue3：最新版本的Vue.js，提供更优的性能和组合式API
3. TypeScript：JavaScript的超集，提供强类型检查和更好的开发体验

这一技术组合特别适合需要快速迭代、多端发布的中小型项目。

二、环境搭建与项目初始化

1. 开发环境准备

# 安装HBuilderX（推荐IDE）
# 或使用VSCode + uni-app插件

# 全局安装vue-cli
npm install -g @vue/cli

# 创建UniApp项目（选择TypeScript模板）
vue create -p dcloudio/uni-preset-vue my-uniapp-project

2. 项目结构解析

my-uniapp-project/
├── src/
│   ├── pages/          # 页面目录
│   ├── static/         # 静态资源
│   ├── store/          # Vuex状态管理
│   ├── utils/          # 工具函数
│   └── main.ts         # 应用入口
├── tsconfig.json       # TypeScript配置
└── uni.scss           # 全局样式

三、核心开发实践

1. 组合式API与TypeScript结合

// pages/index/index.vue
<script setup lang="ts">
import { ref, computed } from 'vue'

interface User {
  id: number
  name: string
  age: number
}

const users = ref<User[]>([])
const totalAge = computed(() => users.value.reduce((sum, user) => sum + user.age, 0))

const fetchUsers = async () => {
  const response = await uni.request({
    url: 'https://api.example.com/users'
  })
  users.value = response.data as User[]
}
</script>

2. 跨平台兼容处理

// utils/platform.ts
export const isWeapp = () => {
  return process.env.UNI_PLATFORM === 'mp-weixin'
}

export const showToast = (message: string) => {
  if (isWeapp()) {
    wx.showToast({ title: message })
  } else {
    uni.showToast({ title: message })
  }
}

四、状态管理与工程化

1. Pinia状态管理（推荐替代Vuex）

// store/userStore.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    userInfo: null as UserInfo | null
  }),
  actions: {
    async login(credentials: LoginParams) {
      const res = await api.login(credentials)
      this.token = res.token
      this.userInfo = res.userInfo
    }
  }
})

2. API请求封装

// utils/request.ts
import type { RequestConfig } from './types'

const request = <T>(config: RequestConfig): Promise<T> => {
  return new Promise((resolve, reject) => {
    uni.request({
      url: config.url,
      method: config.method || 'GET',
      data: config.data,
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data as T)
        } else {
          reject(new Error(res.data.message || '请求失败'))
        }
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

export default request

五、性能优化策略

1. 按需加载与分包：

   // pages.json
   {
     "subPackages": [
       {
         "root": "packageA",
         "pages": [
           {"path": "page1", "style": {}},
           {"path": "page2", "style": {}}
         ]
       }
     ]
   }
   

2. 图片优化：

   • 使用WebP格式
   • 实现懒加载

   <image lazy-load :src="imageUrl" mode="aspectFill"></image>
   

3. 组件与工具函数按需引入：

   // 使用unplugin-auto-import自动导入常用API
   // vite.config.ts
   import AutoImport from 'unplugin-auto-import/vite'
   
   export default defineConfig({
     plugins: [
       AutoImport({
         imports: ['vue', 'pinia', '@dcloudio/uni-app']
       })
     ]
   })
   

六、调试与发布

1. 多端调试技巧：

   • 微信小程序：使用微信开发者工具
   • H5：Chrome开发者工具
   • App：HBuilderX真机调试

2. 自动化构建：

   // package.json
   {
     "scripts": {
       "build:h5": "uni-build --platform h5",
       "build:mp-weixin": "uni-build --platform mp-weixin",
       "build:app": "uni-build --platform app"
     }
   }
   

七、常见问题与解决方案

1. 类型定义扩展：

   // types/uni-app.d.ts
   declare namespace UniApp {
     interface RequestOptions {
       showLoading?: boolean
       loadingText?: string
     }
   }
   

2. 平台特有样式处理：

   /* 条件编译示例 */
   /* #ifdef MP-WEIXIN */
   .wx-specific {
     color: #07C160;
   }
   /* #endif */
   

3. 第三方组件集成：

   # 安装uView UI
   npm install uview-ui
   

   // main.ts
   import uView from 'uview-ui'
   app.use(uView)
   

结语

UniApp+Vue3+TypeScript技术栈为开发者提供了高效、可靠的跨平台开发解决方案。通过本文介绍的核心概念和最佳实践，开发者可以快速上手并构建高质量的跨平台应用。随着技术的不断演进，这一技术组合将继续在跨平台开发领域发挥重要作用。